window.onload = function() {
  // 获取窗口的初始宽度
  var initialWindowWidth = window.innerWidth;
  // 获取 <body> 元素
  var body = document.body;
  // 设置 <body> 元素的宽度为窗口的宽度
  //body.style.width = initialWindowWidth + "px";
  console.log("打开页面时的窗口宽度:", initialWindowWidth);
};








// 获取页面顶部的元素
const topBtn = document.getElementById("scrollToTopBtn");

// 监听滚动事件
window.onscroll = function() {
  scrollFunction();
};

// 当用户向下滚动超过一定距离时显示按钮
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    topBtn.style.display = "block";
  } else {
    topBtn.style.display = "none";
  }
}

// 点击按钮时滚动到页面顶部
topBtn.onclick = function() {
  // 使用window.scrollTo方法平滑滚动到页面顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};


var titles = document.getElementsByClassName("title");
var divcontent1 = document.getElementById("content1");
var currentSpan = null; // 用于存储当前显示的 span 元素
var pageturns =document.getElementsByClassName("pageturn");
var pageturnstart=document.getElementById("pageturnstart");
var back = document.getElementById("back");



for(var i = 0 ;i<pageturns.length;i++)
{
  pageturns[i].style.display="none";
}




function updateTitles(index) {
    if (currentSpan) {
        divcontent1.removeChild(currentSpan);
    }

    for (var i = 0; i < titles.length; i++) {
        titles[i].style.backgroundColor = "whitesmoke";
        pageturns[i].style.display="none";
    }
    pageturnstart.style.display="none";
    pageturns[index].style.display="";
    titles[index].style.backgroundColor = "red";
    
   
    var span = document.createElement("span");
    var texts = ["域名备案", "网页设计", "网站建设", "建站经验"];
    var content = document.createTextNode("》" + texts[index]);
    var id = document.createAttribute("id");
    id.value="root";
    span.setAttributeNode(id);
    span.appendChild(content);
    divcontent1.appendChild(span);
    currentSpan = span; // 更新当前显示的 span 元素
    console.log(span);
    
    
}
back.onclick=function(){
  pageturnstart.style.display="";
  for(var i = 0 ; i < titles.length;i++)
  {
    pageturns[i].style.display="none";
    titles[i].style.backgroundColor = "whitesmoke";
  }
  var root = document.getElementById("root");
  root.innerHTML = "";
 

}
titles[0].onclick = function() { updateTitles(0); };
titles[1].onclick = function() { updateTitles(1); };
titles[2].onclick = function() { updateTitles(2); };
titles[3].onclick = function() { updateTitles(3); };




var red1 = document.getElementsByClassName('red1');
for(var i = 0 ; i < red1.length ;++i)
{
  red1[i].onmouseover = (function(index) {
    return function() {
      red1[index].style.color = "red";
    };
  })(i);
  red1[i].onmouseleave = (function(index) {
    return function() {
      red1[index].style.color = "black";
    };
  })(i);
}

var red2 = document.getElementsByClassName('red2');
for(var i = 0 ; i < red2.length ;++i)
{
  red2[i].onmouseover = (function(index) {
    return function() {
      red2[index].style.color = "red";
    };
  })(i);
  red2[i].onmouseleave = (function(index) {
    return function() {
      red2[index].style.color = "black";
    };
  })(i);
}


var red3 = document.getElementsByClassName('red3');
for(var i = 0 ; i < red2.length ;++i)
{
  red3[i].onmouseover = (function(index) {
    return function() {
      red3[index].style.color = "red";
    };
  })(i);
  red3[i].onmouseleave = (function(index) {
    return function() {
      red3[index].style.color = "black";
    };
  })(i);
}


var red4 = document.getElementsByClassName('red4');
for(var i = 0 ; i < red2.length ;++i)
{
  red4[i].onmouseover = (function(index) {
    return function() {
      red4[index].style.color = "red";
    };
  })(i);
  red4[i].onmouseleave = (function(index) {
    return function() {
      red4[index].style.color = "black";
    };
  })(i);
}




var fixed2 =document.getElementById("fixed2")
var fixed = document.getElementById("fixed");
var out = document.getElementById("out")



fixed2.addEventListener('click', function() {
  // 清除之前的动画设置
  fixed.style.animation = 'none';
  // 延迟一小段时间后重新设置动画，以确保动画可以重新开始
  setTimeout(() => {
     fixed.style.animation = "huadong 1s ease-in 0s 1 normal forwards";
   }, 0);
});


out.addEventListener('click', function() {
  // 清除之前的动画设置
  fixed.style.animation = 'none';
  // 延迟一小段时间后重新设置动画，以确保动画可以重新开始
  setTimeout(() => {
     fixed.style.animation = "huadong 1s ease-in 0s 1 reverse forwards";
   }, 0);
});


